<template>
  <div class="join-con">
    <div class="bannerbox">
      <img class="backimg" src="../../assets/images/newimg/bg.jpg" alt="" />
    </div>
    <div class="full">
      <img src="../../assets/images/newimg/full.png" alt="">
    </div>

    <div class="form-con">
      <form action="">
        <ul class="biao">
          <li>
            <img src="../../assets/images/newimg/name.png" alt="">
            <input type="text" v-model="formInfo.businessName" placeholder="请输入商户名称">
          </li>
           <li>
            <img src="../../assets/images/newimg/login.png" alt="">
            <input type="text" v-model="formInfo.people" placeholder="请输入联系人">
          </li>
           <li>
            <img src="../../assets/images/newimg/phone.png" alt="">
            <input type="text" v-model="formInfo.phone" placeholder="请输入手机号">
          </li>
           <li>
            <img src="../../assets/images/newimg/address.png" alt="">
            <input type="text" v-model="formInfo.address" placeholder="请输入地址">
          </li>
        </ul>
      </form>
    </div>

    <div style="text-align:center">
      <button class="btn" @click="subInfo">提交信息</button>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      formInfo: {
        businessName: '',
        people: '',
        phone: '',
        address: ''
      }
    }
  },
  methods: {
    subInfo () {
      var that = this
      var info = this.formInfo
      if (info.businessName === '') {
        alert('请输入商户名称')
      } else if (info.people === '') {
        alert('请输入联系人')
      } else if (info.phone === '') {
        alert('请输入手机号')
      } else {
        var data = that.formInfo
        this.$http({
          method: 'get',
          url: 'http://api.wangjianxin.top/insertBusinessApply?businessName=' + data.businessName + '&people=' + data.people + '&phone=' + data.phone + '&address=' + data.address
          // data: that.formInfo
        }).then(function (res) {
          // that.shareData = res
          console.log(res)
          if (res.status === 200) {
            alert('提交成功')
          }
        })
      }
    }
  }
}
</script>
<style scope>
.backimg {
    width: 7.5rem;
    height: 100vh;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -99;
  }
  /* 客满多 */
  .full{
    text-align: center;
    margin: 20% 0 10%;
  }
  .full img{
     width: 80%;
  }
  /* form表单 */
  .form-con{
    width: 80%;
    margin: 0 10%;
    border-radius: .2rem;
    background: rgba(204,204,204,.1);
    border:.01rem solid #F4C08E;
  }
  .biao{
    padding: .3rem
  }
  .biao li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: .3rem;
  }
  .biao li img{
    width: .55rem;
  }
  .biao li input{
    width: 4rem;
    height: .6rem;
    background: transparent;
    border:.01rem solid #F4C08E;
    border-radius: .3rem;
    margin-left: .3rem;
    font-size: .24rem;
    color: #818181;
    padding-left: .3rem;
  }
  /* 提交按钮 */
  .btn{
    width: 4rem;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    font-size: .24rem;
    color: #111;
    background: linear-gradient(left,#f4c08e,#ffdfc0);
    border-radius: .3rem;
    border: none;
  }
</style>
